{extend name="public/common"}

{block name="style"}
<link rel="stylesheet" href="__HOME__/css/user/personal.css">
<link rel="stylesheet" href="__ADMIN__/css/chosen/chosen.css">
<style>
	@keyframes rotate {
		0% {
			transform:rotate(0deg);
		}
		50% {
			transform:rotate(180deg);
		}
		100% {
			transform:rotate(360deg);
		}
	}
	.showbox {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 5%;
		background: rgba(0, 0, 0, 0.3);
		display: none;
	}

	.loader {
		position: relative;
		margin: 0 auto;
		width: 100px;
		margin-top: 70%;
	}
	.loader:before {
		content: '';
		display: block;
		padding-top: 50%;
	}

	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
		stroke-linecap: round;
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}
	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}
	@keyframes color {
		100%,
		0% {
			stroke: #d62d20;
		}
		40% {
			stroke: #0057e7;
		}
		66% {
			stroke: #008744;
		}
		80%,
		90% {
			stroke: #ffa700;
		}
	}
	.single{
		position: absolute;
		padding-left: 0;
		margin-top: 12vw;
		font-size: 1.5rem;
	}
	.hy-radio {
		width: 21px;
		height: 0;
		background-color: #000;
		/*margin-right: 30px;*/
		border-radius: 50%;
		position: relative;
		top: -15px;
	}
	.hy-radio:before,.hy-radio:after {
		content: '';
		display: block;
		position: absolute;
		border-radius: 50%;
		transition: .3s ease;
	}
	.hy-radio:before {
		top: 1px;
		left: 0;
		width: 18px;
		height: 18px;
		background-color: #fff;
		border: 1px solid #64a052;
	}
	.hy-radio:after {
		top: 6px;
		left: 4.5px;
		width: 8px;
		height: 8px;
		background-color: #fff;
	}
	.hy-radio:checked:after {
		top: 4px;
		left: 3px;
		width: 12px;
		height: 12px;
		background-color: #64a052;
	}
	.hy-radio:checked:before {
		border-color:#64a052;
	}
	.save{
		width: 25vw;
		height:10vw;
		background: #64a052;
		border-radius: 5px;
		color: #fff;
		border: 1px solid #64a052;
		margin: 4.8vw auto;
		text-align: center;
		font-size: 1.6rem;
		line-height: 10vw;
		box-shadow: 0 0 1.6vw #64a052;
	}
	.save{
		margin-top:32vw;
	}
	input{
		-webkit-appearance: checkbox;
	}
</style>
{/block}

{block name="body"}
<div class="lists">
	<div class="list clear tag">
		<span class="fl">基本信息</span>
	</div>
	<div class="list clear">
		<span class="fl">昵称</span>
		<span class="fr">{$user.nickname}</span>
	</div>
	<div class="list clear">
		<span class="fl">性别</span>
		<span class="fr">{$user.sex}</span>
	</div>
	<div class="list clear">
		<span class="fl">所在地</span>
		<span class="fr">{$user.country}-{$user.province}-{$user.city}</span>
	</div>
	<div class="list clear">
		<span class="fl">语言</span>
		<span class="fr">{$user.language}</span>
	</div>
	<div class="list clear">
		<span class="fl">粉丝备注</span>
		<span class="fr">{$user.remark}</span>
	</div>
	{eq name="$user.subscribe" value="1"}
	<div class="list clear">
		<span class="fl">关注时间</span>
		<span class="fr">{$user.subscribe_time|time_format="Y-m-d"}</span>
	</div>
	<div class="list clear">
		<span class="fl">所在分组</span>
		<span class="fr">{$user.group}</span>
	</div>
	{else/}
	<div class="list clear">
		<span class="fl">是否关注</span>
		<span class="fr">否</span>
	</div>
	{/eq}
	{if condition="$user.review_status eq 1 and $user.role eq 0 and $user.subscribe eq 1"}
	{empty name="$user.words"}
	<div class="list clear">
		<span class="fl">每日单词</span>
		<span class="fr">老师未分配，暂无法操作</span>
	</div>
	{else/}
	<div class="list clear" style="height: 200px;">
		<span class="fl" style="float: left">每日单词（请谨慎选择）</span>
		<div class="single">
			{volist name="words" id="ww"}
			<input type="radio" class="hy-radio"  value="{$ww.id}" name="type" {eq name="$user.type" value="$ww.id"} checked {/eq}> {$ww.name}&nbsp;
			{/volist}
		</div>
		<div class="save">提&emsp;交</div>
	</div>
	{/empty}
	{/if}
</div>
<div class="showbox">
	<div class="loader">
		<svg class="circular" viewBox="25 25 50 50">
			<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
		</svg>
	</div>
</div>
{/block}

{block name="script"}
<script src="__ADMIN__/js/chosen.jquery.js"></script>
<script src="__ADMIN__/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
$(function(){
	//模块标题
	$('title' ).text('点对点教育VIP学员_个人信息');
    //关闭分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
	$(".save").on("click",function(){
		var type = $("input[type=radio]:checked").val();
		if (typeof(type) == "undefined"){
			swal("你还没选择类型！");
			return false;
		}
		var id ="{$user.openid}";
		swal({
			title: "确定提交选项吗？",
			type: "warning",
			showCancelButton: true,
			confirmButtonColor: "#DD6B55",
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			closeOnConfirm: false
		},
		function(){
			$.ajax({
				url: "{:Url('User/play')}",
				type: 'post',
				data: {
					id: id,
					type:type
				},
				success:function(data){
					if(data.code == 1){
						swal({
							title: ' ',
							text: data.msg,
							type: 'success',
							confirmButtonText:'确定'
						});
						setTimeout(function(){
							window.location.reload();
						},500);
					}else{
						swal({
							title: ' ',
							text: data.msg,
							type: 'error',
							confirmButtonText:'确定'
						});
					}
				}
			})
		});
	})
})
</script>
{/block}